<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div1" class="container">
        <p id="p1">一段文字 1</p>
        <p>一段文字 2</p>
        <p>一段文字 3</p>
    </div>
    <div id="div2">
        <img src="https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg" />
    </div>
    <ul id="list">
    </ul>
    <script>
        const div1 = document.getElementById('div1');
        const div2 = document.getElementById('div2');
        // 添加新节点
        const newP = document.createElement('p');
        newP.innerHTML = 'this is newP';
        div1.appendChild(newP); // 添加新创建的元素
        // 移动已有节点，注意是移动
        const p1 = document.getElementById('p1');
        div2.appendChild(p1);


        // 获取父元素
        console.log(p1.parentNode); // div2
        // 获取子元素列表
        const div1ChildNodes = div1.childNodes
        console.log(div1.childNodes); // 7个，其实应该有3个的，7个其实是包含文本text的

        // 怎么样只获取p呢
        const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child => {
            if (child.nodeType === 1) {
                return true;
            }
            return false;
        })
        console.log('div1ChildNodesP', div1ChildNodesP); // 3个p

        // 删除节点
        div1.removeChild(div1ChildNodesP[0]);// 一段文字2就没有了
    </script>
</body>

</html>